<template>
  <view class="bg-white">
    <cu-custom
      bgColor="bg-white"
      :isBack="true"
    >
      <block slot="content">转正申请新增</block>

    </cu-custom>
    <view style="padding: 15px;">
      <form>
        <view>
          <image
            style="width: 100rpx;height: 100rpx;"
            :src="dataObj.avatar"
          ></image>
        </view>
        <view class="cu-form-group">
          <view class="title">姓名</view>
          <!--					<my-select range-key="text" value-key="value" dict-code="sys_user,realname,id" v-model="userId" />-->
          <my-seach-select
           range-key="realname" value-key="id"  searchUrl="/sys/user/list"  
		   :defaultParams="{
						    jobStatus: '1',
						    pageNo: 1,
						    pageSize: -1,
						    company: Auth_Company_Id,
						  }"
            v-model="userId"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">工号</view>
          <input
            disabled
            v-model="dataObj.workNo"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">入职时间</view>
          <input
            disabled
            v-model="dataObj.proposedEmploymentDate"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">性别</view>
          <input
            disabled
            v-model="dataObj.sex_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">年龄</view>
          <input
            disabled
            v-model="dataObj.age"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">学历</view>
          <input
            disabled
            v-model="dataObj.education_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">公司</view>
          <input
            disabled
            v-model="dataObj.company_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">部门</view>
          <input
            disabled
            v-model="dataObj.departIds_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">岗位</view>
          <input
            disabled
            v-model="dataObj.post"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">试用期时长(月)</view>
          <input
            disabled
            v-model="dataObj.probationPeriodDuration"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: grey;border-radius: 15px;"
        >
          <view class="title">转正日期</view>
          <picker
            mode="date"
            :value="confirmationTime"
            @change="DateChange"
          >
            <view class="picker">
              {{confirmationTime.replace(/\-/g, "/")}}
            </view>
          </picker>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">试用工资(元/月)</view>
          <input
            disabled
            v-model="dataObj.probationSalary"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #E2E2E2;border-radius: 15px;"
        >
          <view class="title">转正工资(元/月)</view>
          <input
            v-model="dataObj.regularSalary"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px;"
          ></input>
        </view>
      </form>
      <view style="display: flex;margin-top: 15px;justify-content: space-between;align-items: center;">
      	<view @click="submit"
      		style="padding: 30rpx 110rpx; margin-left: 20rpx;margin-top: 20rpx; background-color: rgba(30, 94, 255, 1);border-radius: 30rpx;color: #FFFFFF;">
      		提交审核
      	</view>
      	<view @click="save"
      		style="padding: 30rpx 110rpx;margin-left: 20rpx;margin-top: 20rpx;border-radius: 30rpx;background-color: rgba(255, 173, 4, 1); color: #FFFFFF;">
      		保存
      	</view>
      </view>

      <uni-popup
        ref="submitFlag"
        background-color="#fff"
        :mask-click="false"
      >
        <view style="text-align: center;background-color: #FFFFFF;padding: 11rpx;width: 580rpx;height: 470rpx;border-radius: 42rpx;">
          <view>
            <view class="submit-item">
              <image
                class="submit-icon"
                src="@/static/duihaoblue.png"
              />
            </view>
            <view style="margin-top: 28rpx;">
              <text class="submit-text">住宿申请已经提交</text>
            </view>
            <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx;">
              <text>已提醒审核人员进行审核</text>
            </view>
            <button
              @click="sureOne"
              style="border-radius: 20rpx; background-color: rgba(69, 145, 254, 1);
									color: rgba(255, 255, 255, 1);width: 300rpx;margin-top: 27rpx;"
            >确定</button>
          </view>
        </view>
      </uni-popup>
      <uni-popup
        ref="draftsFlag"
        background-color="#fff"
        :mask-click="false"
      >
        <view>
          <view style="text-align: center;background-color: #FFFFFF;padding: 11rpx;width: 580rpx;height: 470rpx;border-radius: 42rpx;">
            <view class="submit-item">
              <image
                class="submit-icon"
                src="@/static/drafts.png"
              />
            </view>
            <view style="margin-top: 28rpx;">
              <text class="submit-text">已保存进草稿箱</text>
            </view>
            <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx;">
              <text>您可以进入草稿箱查看</text>
            </view>
            <button
              @click="sureThree"
              style="border-radius: 20rpx; background-color: rgba(69, 145, 254, 1);
					color: rgba(255, 255, 255, 1);width: 300rpx;margin-top: 27rpx;"
            >确定</button>
          </view>
        </view>
      </uni-popup>
    </view>

  </view>
</template>

<script>
import moment from 'moment';
export default {
  data () {
    return {
	  Auth_Company_Id: "",
      uniDeptDataPicker: '',
      id: Math.floor(Math.random() * 10000000000000000000) + Date.now(),
      userId: '',
      confirmationTime: moment().format('YYYY-MM-DD'),
      dataObj: {
      },
    }
  },
  mounted () {
     this.Auth_Company_Id = uni.getStorageSync("Auth_Company_Id");
  },
  onLoad: function (option) {
    uni.$on('departCallBack', (data) => {
      this.$set(this.myFormData, 'newDepartIds', data?.idArray?.join(','))
      this.$set(this.myFormData, 'newDepartTitle', data?.titleArray?.join('>'))
    })
  },
  watch: {
    userId: {
      immediate: true,
      handler (val, old) {
        console.log("dataObject.userId值变化")
        console.log(val)
        console.log(old)
        this.userId = val;
        if (this.userId != '') {
          this.queryUserByUserId()
        }
      },
    },
    'myFormData.newWorkNoFlag': {
      immediate: true,
      handler (val, old) {
        if (val == '1') {
          this.$http.post(
            '/crm_employment_application/crmEmploymentApplication/generateWorkNo/', {
            company: this.myFormData.newCompany,
            departIds: this.dataObj.departIds,
            idCard: this.dataObj.idCard
          })
            .then(res => {
              if (res.data.success) {
                this.myFormData.newWorkNo = res.data.result
              } else {
                this.$tip.toast('获取失败')
              }
            }).catch(() => {
              this.$tip.loaded();
              this.$tip.toast('获取失败')
            });
        }
      },
    },
    uniDeptDataPicker: {
      immediate: true,
      handler (val, old) {
        if (val.length > 0) {
          let deptIds = []
          val.forEach((item) => {
            deptIds.push(item.value)
          })
          this.dataObj.departIds = deptIds.join(',')
        }
      },
    }
  },
  computed: {

  },
  methods: {
    DateChange (e) {
      this.confirmationTime = e.detail.value
      this.dataObj.confirmationTime = e.detail.value
    },
    queryUserByUserId () {
      this.$http.get('/crm_user/crmUser/queryById', {
        params: {
          id: this.userId
        }
      }).then(res => {
        console.log("res->新增转正申请", res)
        if (res.data.success) {
          this.dataObj = res.data.result
        }
      }).catch(err => {
        console.log(err);
      });
    },
    ChooseDepartIds () {
      uni.navigateTo({
        url: '/pages/oa/common/depart',
      });
    },
    submit () {
      const that = this
      setTimeout(() => {
        this.$http.post('/crm_become_regular_application/crmBecomeRegularApplication/add', {
          "approvalStatus": "2",
          "age": this.dataObj.age,
          "departIds": this.dataObj.departIds,
          "education": this.dataObj.education,
          "post": this.dataObj.post,
          "probationPeriodDuration": this.dataObj.probationPeriodDuration,
          "probationSalary": this.dataObj.probationSalary,
          "proposedEmploymentDate": this.dataObj.proposedEmploymentDate,
          "regularDate": this.confirmationTime ? this.confirmationTime.replace(/\//g, "-") : '',
          "regularSalary": this.dataObj.regularSalary,
          "sex": this.dataObj.sex,
          "id": this.id,
          "userId": this.userId,
		  "workNo":this.dataObj.workNo,
		  "sex_dictText":this.dataObj.sex_dictText,
		  "company_dictText":this.dataObj.company_dictText,
		  'company':this.dataObj.company,
		  "orgCodeTxt":this.dataObj.orgCodeTxt,
		  
        }).then(res => {
          if (res.data.success) {
            setTimeout(() => {
              this.$http.post(
                '/crm_become_regular_application/crmBecomeRegularApplication/submitTrial/' + this.id)
                .then(res => {
                  if (res.data.success) {
                    this.$refs.submitFlag.open('center')
                  } else {
                    this.$tip.toast('提交审核失败')
                  }
                }).catch(() => {
                  this.$tip.loaded();
                  this.$tip.toast('提交审核失败')
                });
            }, 100)
          } else {
            this.$tip.toast(res.data.message)
          }
        }).catch(() => {
          this.$tip.loaded();
          this.$tip.toast('提交失败')
        });
      }, 500)
    },
    sureOne () {
      this.$refs.submitFlag.close()
      uni.navigateTo({
        url: '/pages/confirmationApplication/index'
      })
    },
    save () {
	console.log('this.dataObj.confirmationTime',this.dataObj.confirmationTime)
      this.$http.post('/crm_become_regular_application/crmBecomeRegularApplication/add', {
        "approvalStatus": "1",
        "age": this.dataObj.age,
        "departIds": this.dataObj.departIds,
        "education": this.dataObj.education,
        "post": this.dataObj.post,
        "probationPeriodDuration": this.dataObj.probationPeriodDuration,
        "probationSalary": this.dataObj.probationSalary,
        "proposedEmploymentDate": this.dataObj.proposedEmploymentDate,
         "regularDate": this.confirmationTime ? this.confirmationTime.replace(/\//g, "-") : '',
        "regularSalary": this.dataObj.regularSalary,
        "sex": this.dataObj.sex,
        "id": this.id,
        "userId": this.userId,
		"workNo":this.dataObj.workNo,
		"sex_dictText":this.dataObj.sex_dictText,
		"company_dictText":this.dataObj.company_dictText,
		'company':this.dataObj.company,
		"orgCodeTxt":this.dataObj.orgCodeTxt
      }).then(res => {
        if (res.data.success) {
          this.$refs.draftsFlag.open('center')
        } else {
          this.$tip.toast(res.data.message)
        }
      }).catch(() => {
        this.$tip.loaded();
        this.$tip.toast('提交失败')
      });
    },
    sureThree () {
      this.$refs.draftsFlag.close()
      uni.navigateTo({
        url: '/pages/confirmationApplication/confirmationApplicationDraft/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
}

.blackList {
  height: 100%;
  overflow: hidden;
}

.page-search {
  padding-left: 34rpx;
  margin-bottom: 12rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 680rpx;
  height: 86rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;

  .search-left {
    width: 28rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-center {
    margin-left: 22rpx;
  }

  .search-placeholder {
    font-size: 28rpx;
    font-weight: 400;
    color: #7c7c7c;
  }
}

.filter-btn {
  width: 40rpx;
  height: 40rpx;
  margin-right: 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-content-main {
  height: calc(100% - 12rpx - 86rpx);
  border-top-left-radius: 64rpx;
  border-top-right-radius: 64rpx;
  padding: 26rpx 34rpx 0 34rpx;
}

.select-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.select {
  width: 160rpx;
  height: 74rpx;
  border-radius: 60rpx;
  background-color: #4591fe;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 48rpx;
  position: relative;

  .select-value {
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    margin-right: 18rpx;
  }

  .select-icon {
    width: 22rpx;
    height: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20rpx;
    top: 25rpx;
  }
}

.list {
  height: calc(100% - 74rpx - 20rpx);
}

.list-item {
  border-radius: 28rpx;
  background-color: #ffffff;
  padding: 26rpx 24rpx 28rpx 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 26rpx;
  position: relative;

  .list-item-leftCenter {
    display: flex;
    flex-direction: row;
  }

  .list-item-left {
    width: 86rpx;
    height: 86rpx;
    margin-right: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-center {
    .list-item-row {
      display: flex;
      flex-direction: row;
      margin-bottom: 20rpx;

      .list-item-name {
        color: #101317;
        font-size: 32rpx;
        margin-right: 16rpx;
      }

      .list-item-sex {
        width: 106rpx;
        height: 42rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-bottom-left-radius: 20rpx;
        background-color: rgba(234, 171, 78, 0.35);
        line-height: 42rpx;
        text-align: center;
        color: rgba(255, 173, 4, 1);
        font-size: 24rpx;
      }

      .list-item-row-icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .list-item-row-title,
      .list-item-row-value {
        font-size: 24rpx;
        font-weight: 400;
        color: #101317;
        line-height: 38rpx;
      }
    }
  }

  .list-item-btn {
    width: 36rpx;
    height: 36rpx;
    margin-top: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-tab {
    width: 132rpx;
    height: 56rpx;
    text-align: center;
    line-height: 56rpx;
    background-color: rgba(69, 145, 254, 0.4);
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 26rpx;
    border-bottom-left-radius: 20rpx;
  }

  .list-item-tab-text {
    font-size: 26rpx;
    color: rgba(69, 145, 254, 1);
  }
}

.nav-right-image {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15px;
}

.cu-form-group {
  background-color: transparent;
}

::v-deep {
  .cu-form-group uni-picker .picker {
    color: #ffffff;
  }

  .cu-form-group uni-picker::after {
    opacity: 0;
  }
}

.textView {
  margin-left: 25px;
  font-size: 10px;
  margin-top: 5px;
}

.listText {
  width: 148rpx;
  height: 24rpx;
  font-size: 20rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 24rpx;
}

/deep/ .uni-radio-input {
  width: 10px;
  height: 10px;
}

.submit-icon {
  width: 118rpx;
  height: 118rpx;
  margin-top: 58rpx;
}
</style>
